<template>
	<view class="poster">
		<navBar title="海报"></navBar>
		<view class="swiper">
			<carousel :img-list="posterList" url-key="image" @change="swiperChange" />
		</view>
		<!--    <view class="poster-content">
      <swiper
        class="swiper"
        :current="current"
        indicator-color="rgba(0, 0, 0, .5)"
        indicator-active-color="rgb(66, 82, 253)"
        :circular="true"
        @change="swiperChange"
      >
        <template v-for="(item, index) in posterList">
          <swiper-item :key="item.id">
            <image
              :src="item.image"
              class="img"
              :class="index == current ? 'img--active' : ''"
              mode="heightFix"
            ></image>
          </swiper-item>
        </template>
      </swiper>
    </view> -->
		<view class="poster-btn" @click.stop="saveImg">
			分享保存
		</view>
		<view class="remark">保存到相册可分享到朋友圈</view>
		<l-painter ref="painter" isCanvasToTempFilePath @success="path = $event"
			custom-style="position: fixed; left: 200%" />
	</view>
</template>

<script>
	import {
		posterInfo,
		QRCode
	} from "@/utils/api";
	// import lPainter from "@/components/painter/index"; 
	import carousel from '@/components/vear-carousel/vear-carousel'
	import {
		mapGetters
	} from 'vuex'
	export default {
		components: {
			// lPainter,
			carousel
		},
		data() {
			return {
				showBtn: false,
				isRenderImage: false,
				code: "", // 二维码地址
				current: 0,
				posterList: [],
				board: {},
				// poster: "",
				poster: {},
				path: ""
			};
		},
		onLoad() {
			// setTimeout(()=>{
			// 	this.$refs.painter.render(this.poster);
			// }, 1500)
			this.initInfo();
			uni.showLoading();
		},
		computed: {
			...mapGetters(["userInfo", "shareId"]),
		},
		methods: {
			drawDone() {
				console.log("绘制完成===");
				uni.hideLoading();
				this.showBtn = true;
			},
			drawInfo() {
				this.board = {
					width: "750rpx",
					height: "1344rpx",
					views: [{
							type: "image",
							src: this.posterList[this.current].image,
							mode: "aspectFill",
							css: {
								position: 'absolute',
								left: "0rpx",
								top: "0rpx",
								width: "750rpx",
								height: "1344rpx",
							},
						},
						{
							type: "image",
							src: this.code,
							mode: "aspectFit",
							css: {
								position: 'absolute',
								left: "580rpx",
								top: "1150rpx",
								width: "150rpx",
								height: "150rpx",
								'z-index': '999'
							},
						},
					],
				};
				console.log(this.board);
				this.$refs.painter.render(this.board);
			},
			initInfo() {
				var that = this;
				posterInfo().then((resp) => {
					if (resp.code == 200) {
						this.posterList = resp.data;
						this.initCode()
					}
				});
			},
			// 获取二维码
			initCode() {
				var that = this;
				return new Promise((resolve, reject) => {
					QRCode().then((resp) => {
						if (resp.code == 200) {
							that.code = resp.data;
							this.drawInfo()
						}
					});
				});
			},
			fail(e) {
				console.log("12121======", e);
			},
			swiperChange(current) {
				// var that = this;
				// this.showBtn = false;
				// // console.log("swiperChange", e);
				// const { current } = e.detail;
				this.current = current;
				this.drawInfo();
			},
			saveImg() {
				var that = this;

				if (uni.getStorageSync("token")) {
					uni.showLoading();
					uni.saveImageToPhotosAlbum({
						filePath: this.path,
						success(res) {
							uni.hideLoading();
							uni.showToast({
								title: "已保存到相册",
								icon: "success",
								duration: 2000,
							});
						},
						fail(error) {
							console.log(error);
							uni.hideLoading();
						},
					});
					// uni.downloadFile({
					//   url: that.posterList[that.current].image,
					//   success: ({ tempFilePath, statusCode }) => {
					//     uni.saveImageToPhotosAlbum({
					//       filePath: tempFilePath,
					//       success: () => {
					//         uni.hideLoading();
					//         uni.showToast({
					//           title: "保存成功",
					//         });
					//       },
					//       fail: () => {
					//         uni.hideLoading();
					//         uni.showToast({
					//           icon: "none",
					//           title: "保存失败",
					//         });
					//       },
					//     });
					//   },
					//   fail: (error) => {
					//     console.log("保存失败", error);
					//     uni.hideLoading();
					//     uni.showToast({
					//       icon: "none",
					//       title: "保存失败",
					//     });
					//   },
					// });
				} else {
					uni.showToast({
						icon: "none",
						title: "请先登录",
						success: () => {
							setTimeout(() => {
								uni.switchTab({
									url: "/pages/mine/mine",
								});
							}, 1500);
						},
					});
				}
			},
			preClick() {
				if (this.current == 0) {
					uni.showToast({
						icon: "none",
						title: "已经是第一张了！",
					});
				} else {
					this.showBtn = false;
					this.current--;
					this.drawInfo();
				}
			},
			nextClick() {
				if (this.current == this.posterList.length - 1) {
					uni.showToast({
						icon: "none",
						title: "已经是最后一张了！",
					});
				} else {
					this.showBtn = false;
					this.current++;
					this.drawInfo();
				}
			},
		},
	};
</script>
<style>
	page {
		background-color: #EEEFF0;
	}
</style>
<style lang="scss">
	.poster {
		width: 100%;
		position: relative;

		&-bg {
			width: 100%;
			height: auto;
			margin-bottom: -10rpx;
		}

		&-content {
			// border: 1rpx solid red;
			width: 690rpx;
			box-sizing: border-box;
			margin: 30rpx auto;

			background-color: #ffffff;
			border-radius: 20rpx;

			.swiper {
				// height: 930rpx;
				height: 1150rpx;
				text-align: center;
				position: relative;

				.img {
					// width: 100%;
					width: auto;
					height: 100%;
					// transform: scale(0.8);
					// transition: all 0.3s linear;
				}

				.img--active {
					// transform: scale(1);
				}
			}

			.btn {
				width: 220rpx;
				line-height: 60rpx;
				text-align: center;
				background: linear-gradient(0deg, #6879fe 0%, #98a4ff 100%);
				border-radius: 30rpx;
				font-size: 30rpx;
				color: #ffffff;
				margin: 0 auto;
				margin-top: 30rpx;
				// display: none;
			}
		}

		&-oper {
			position: absolute;
			display: flex;
			align-items: center;
			justify-content: space-between;
			box-sizing: border-box;
			padding: 40rpx;
			top: 1150rpx;
			width: 100%;

			.arrow {
				width: 100rpx;
				height: 100rpx;
				opacity: 0.7;
				// position: absolute;
				// top: 50%;
				// margin-top: -50rpx;
			}

			.arrow-left {
				// left: 0;
				// top: 50%;
				// margin-top: -50rpx;
			}

			.arrow-right {
				// right: 0;
			}
		}

		&-btn {
			width: 594rpx;
			text-align: center;
			background: linear-gradient(to right, #E7AA56 0%, #CB712B 100%);
			border-radius: 60rpx;
			font-size: 30rpx;
			color: #ffffff;
			margin: 0 auto;
			padding: 20rpx 0;
		}

	}

	.remark {
		font-size: 24rpx;
		color: #999999;
		text-align: center;
		margin: 18rpx 0;
	}

	.swiper {
		margin: 30rpx 0;
	}
</style>
